<template>
  <div style="height: 100%;">
    <div class="table_resource" style="text-align: center;height: 97%;">
      <el-table
        height=100%
        :data="showTable"
        border
        style="width: 100%"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        stripe
      >
        <el-table-column prop="gh" label="工号" width="120"> </el-table-column>
        <el-table-column prop="xm" label="姓名" width="300"> </el-table-column>
        <el-table-column prop="bm">
          <template slot="header">
            <el-select v-model="selectkey" filterable placeholder="请选择部门">
              <el-option label="所有部门" value="所有部门">所有部门</el-option>
              <el-option
                v-for="item in departments"
                :key="item.depId"
                :label="item.depName"
                :value="item.depName"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column fixed="right" width="400" align="center">
          <template slot="header">
            <input
              v-model="keywords"
              placeholder="请输入教师姓名或者工号"
              class="el-input__inner"
            />
          </template>
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handlePowerAxios(scope.$index, scope.row)"
              >权限转让</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="resource-page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5, 10, 15,20,25]"
        :page-size="pagesize"
        :pager-count="5"
        layout=" prev, pager, next,sizes, jumper"
        :total="filterDataShow.length"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectkey: "所有部门", //下拉菜单关键字
      keywords: "", // 搜索的关键字
      filterDataShow: [], //储存符合条件的数据
      departments: [],
      tableData: [],
      pagesize: 20,
      currentPage: 1,
    };
  },
  mounted() {
    this.getDepartmentAxios();
    this.getDataAxios();
  },
  methods: {
    //获取部门数据
    getDepartmentAxios() {
      let that = this;
      this.$api.department
        .getSchoolDepartments({})
        .then(function (response) {
          console.log(response);
          that.departments = response.data.data.departments;
          that.searchResource();
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    //获取批次数据
    getDataAxios() {
      let that = this;
      this.$api.teacher
        .getAllTeacherInfo({})
        .then(function (response) {
          that.tableData = response.data.data;
          that.searchResource();
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    //查询
    searchResource() {
      this.currentPage = 1; //将当前页设置为1，确保每次都是从第一页开始搜
      let filterKeywords = this.keywords.trim();
      let filerReasource = this.tableData.filter((item) => {
        //过滤全部数据
        if (
          item.xm.includes(filterKeywords) &&
          (item.bm.includes(this.selectkey) || this.selectkey == "所有部门")
          || item.gh.includes(filterKeywords) &&
          (item.bm.includes(this.selectkey) || this.selectkey == "所有部门")
        ) {
          return item;
        }
      });
      this.filterDataShow = filerReasource; //将符合条件的内容赋给filterDataShow
    },
    handleSizeChange(psize) {
      this.pagesize = psize;
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
    },
    //转让权限
    handlePowerAxios(index, row) {
      //   console.log(row);
      let _that =  this
      this.$confirm("权限转让后将无法更改, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api.system
            .transferSuperAuth({ gh: row.gh })
            .then(function (response) {
              console.log(response);
              if (response.data.code == 200) {
                _that.$message({
                  showClose: true,
                  message: "转让成功",
                  type: "success",
                });
                localStorage.clear();
                _that.$router.push('/login')
              } else if(response.data.code == 4008){
                _that.$message({
                  showClose: true,
                  message: "该用户已是管理员",
                  type: "error",
                })
              }
              else {
                _that.$message({
                  showClose: true,
                  message: "转让失败",
                  type: "error",
                });
              }
            })
            .catch(function (error) {
              console.log(error);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消转让",
          });
        });
    },
  },
  watch: {
    //监听搜索框内容，当搜索框内容发生变化时调用searchResource方法
    keywords() {
      this.searchResource();
    },
    selectkey() {
      this.searchResource();
    },
  },
  computed: {
    //showTable计算属性通过slice方法计算表格当前应显示的数据
    showTable() {
      return this.filterDataShow.slice(
        (this.currentPage - 1) * this.pagesize,
        this.currentPage * this.pagesize
      );
    },
  },
};
</script>
<style scoped>
#find {
  width: 400px;
  margin-bottom: 30px;
}
</style>
